<template>
    <div style="padding: 16px;height: 100%;width: 100%;">
        <div class="plugins-container" v-if="!open">
            <div class="plugins-toolbar">
                <a-input-search placeholder="搜索"
                    enter-button allowClear     @search="onSearch"
                    @pressEnter="onPressEnter" @change="onSearchChange"
                    style="width: min(400px,100%)"/>
            </div>
            <div class="plugins-tabs">
                <a-tabs class="plugins-a-tabs" v-model="activeKeys" @change="callback" :tabBarGutter="36">
                    <template v-for="item of tabs">
                        <a-tab-pane :key="item.key" :tab="item.title">
                            <template v-for="area of item.area" v-if="item.area.length > 0 && tabCls[area]">
                                <div class="tab-list-title">{{tabCls[area].title}}</div>
                                <div class="tab-list-box">
                                    <div v-for="list of tabCls[area].list" class="tab-list-item">
                                        <div class="item-header">
                                            <div class="item-title-area">
                                                <rx-use-icon class="item-img" v-model="list.icon"/>
                                                <div class="item-title">{{ list.title }}</div>
                                            </div>
                                            <a-switch v-model="list.open" size="small" @change="changeStatus(list,$event)"/>
                                        </div>
                                        <div class="item-detail">
                                            {{ list.detail }}
                                        </div>
                                        <div class="detail-btn" v-if="list.isDetail" @click="setOpen(list)">
                                            {{ i18n('detail', '详情') }}<i class="iconfont iconshang"/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </a-tab-pane>
                    </template>
                </a-tabs>
            </div>
        </div>
        <!--   第二页内容     -->
        <div class="plugins-open" v-else>
            <div class="plugins-open-header">
                <div class="open-header-title" @click="open = false">
                    <a-icon type="left" style="font-size: 18px;"/>
                    <h3>{{ curItem.title }}</h3>
                </div>
            </div>
            <div class="plugins-open-content">
                <div class="plugins-open-content-left">
                    <ul class="plugins-ul-list">
                        <li class="plugins-li-item" :class="{ active:leftActive === item.key }" v-for="item of leftList"
                            :key="item.key">
                            <my-icon :type="item.icon"/>
                            <span class="plugins-li-item-title" :title="item.title">{{ item.title }}</span>
                        </li>
                    </ul>
                </div>
                <div class="plugins-open-center">
                    <div class="tab-list-box">
                        <div class="tab-list-item" v-for="list of selectList">
                            <div class="item-header">
                                <div class="item-title-area">
                                    <div class="item-img"><img :src="list.icon" alt=""></div>
                                    <div class="item-title">{{ list.title }}</div>
                                </div>
                                <a-switch v-model="list.open" size="small" @change="changeOpen(list,$event)"/>
                            </div>
                            <div class="item-detail">
                                {{ list.detail }}
                            </div>
                            <div class="detail-btn">
                                <a-button @click="settings(list)" type="primary">
                                    <my-icon type="iconbianji1"/>
                                    配置
                                </a-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2025-03-27 15:37
 */
import {Util, BaseList, RxUseIcon} from '@lowcode/jpaas-common-lib';
import settingDialog from "./settingDialog.vue";
import SysTreeApi from "@/api/system/core/sysTree";
import SysPluginApi from "@/api/system/core/sysPlugin";
import { cloneDeep, debounce} from 'lodash-es'
export default {
    name: "plugins",
    mixins: [BaseList],
    components: {
        RxUseIcon,
    },
    data() {
        return {
            open: false,
            curItem: {},
            treeData: {},
            activeKeys: "allClass",
            tabs: [],
            tabClass: {},
            leftActive: 'arguments',
            leftList: [
                {title: this.i18n('arguments', '参数配置'), key: 'arguments', icon: 'iconqrcode'},
            ],
            selectList: [],
            searchText:''
        }
    },
    computed:{
        tabCls(){
            let { tabClass, searchText } = this;
            if(!searchText){
                return tabClass
            }
            let _tabClass = cloneDeep(tabClass)
            for (let key in tabClass){
                let list = _tabClass[key].list.filter(item=>item.title.includes(searchText));
                if(list.length === 0){
                    Reflect.deleteProperty(_tabClass,key)
                }else {
                    _tabClass[key].list = list
                }
            }
            return _tabClass
        }
    },
    created() {
        this.isUserManager();
        this.init();

    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "PluginCenter", key);
        },
        init() {
            let self = this;
            let queryParams = {catKey: 'PLUGIN', readKey: 'read', isAdmin: this.isManageToTree, isGrant: true}
            SysTreeApi.getTopNodesByCatKey(queryParams).then((res) => {
                self.tabs = [
                    {
                        key: 'allClass', title: this.i18n('allClass', '所有分类'), area: res.map(item => {
                            return item.treeId
                        })
                    },
                    ...res.map(item => {
                        return {key: item.treeId, title: item.name,area:[item.treeId]}
                    })
                ]
                res.forEach(item => {
                    self.treeData[item.alias] = item.treeId;
                    self.tabClass[item.treeId] = {
                        title: item.name,
                        list: []
                    }
                })
                self.setPluginData();
            })
        },
        setPluginData() {
            let self = this;
            SysPluginApi.queryList({}).then(res => {
                res.data.forEach(item => {
                    self.tabClass[item.treeId].list.push({
                        id: item.id,
                        alias: item.alias,
                        icon: item.icon,
                        title: item.name,
                        open: item.status === 'YES',
                        config: item.config,
                        detail: item.desc,
                        isDetail: item.isDetail === 'YES'
                    })
                })
                self.$forceUpdate();
            })
        },
        changeStatus(item, checked) {
            item.open = checked;
            this.$forceUpdate();
            SysPluginApi.updatePlugin({
                id: item.id,
                status: checked ? 'YES' : 'NO'
            });
        },
        setOpen(item) {
            this.open = true;
            this.curItem = item;
            let treeId = this.treeData['AInl'];
            this.selectList = Util.deepClone(this.tabClass[treeId].list.filter(item => {
                return item.open;
            }));
            this.selectList.forEach(select => {
              let config = item.config;
              if (config) {
                let json = JSON.parse(config);
                if (json[select.alias]) {
                  select.open = json[select.alias].open;
                }
              }
            })
        },
        onSearch:debounce(function (value){
            this.searchText = value;
        },300),
        onPressEnter:debounce(function (e){
            this.searchText = e.target.value;
        },300),
        onSearchChange:debounce(function (e){
            if(!e.target.value){
                this.searchText = '';
            }
        },300),
        callback() {

        },
        changeOpen(item, checked) {
            let config = this.curItem.config;
            let json = config ? JSON.parse(config) : {};
            json[item.alias] = {
                ...json[item.alias] || {},
                open: checked
            }
            this.curItem.config = JSON.stringify(json);
            SysPluginApi.updatePlugin({
                id: this.curItem.id,
                config: this.curItem.config
            })
        },
        settings(item) {
            let self = this;
            Util.open({
                curVm: this,
                title: this.i18n('settingInfo', '配置'),
                data: {setting: this.curItem.config, item: item},
                component: settingDialog,
                widthHeight: ['660px', '400px']
            }, function (action, data) {
                if (action !== 'ok') {
                    return;
                }
                self.curItem.config = JSON.stringify(data);
                SysPluginApi.updatePlugin({
                    id: self.curItem.id,
                    config: self.curItem.config
                })
            })
        }
    },
    watch:{
        tabClass:{
            handler(v){
                console.log(v)
                console.log(this.tabs)
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.plugins-container {
    border-radius: 8px;
    background-color: white;
    padding: 24px;
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.plugins-toolbar {
    padding-bottom: 20px;
}

.plugins-container >>> .ant-tabs-bar {
    padding-left: 0;
}

.plugins-container >>> .ant-tabs-tab {
    padding: 10px 2px;
}

.tab-list-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.tab-list-item {
    display: grid;
    flex-direction: column;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(233, 235, 242, 1);
    background: linear-gradient(180deg, rgba(26, 94, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 1);
}

.tab-list-item:hover {
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16);
}

.item-title-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-img {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    height: 40px;
    width: 40px;
}

.item-img img {
    width: 100%;
    object-fit: contain;
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-detail {
    flex: 1;
    margin: 16px 0;
    overflow: hidden;
    display: -webkit-box; /* 将元素设为弹性盒子模型（关键） */
    -webkit-box-orient: vertical; /* 文本垂直排列（必须与 display 配合） */
    -webkit-line-clamp: 2; /* 限制显示行数 */
    text-overflow: ellipsis; /* 溢出部分显示省略号 */
    word-break: break-all;
    width: 100%;
    height: 40px;
}

.tab-list-title {
    margin: 16px 0;
    padding-left: 10px;
    position: relative;
    color: rgba(51, 51, 51, 1);
    font-weight: 700;
}

.tab-list-title:before {
    content: '';
    width: 2px;
    height: 13px;
    position: absolute;
    left: 0;
    top: 5px;
    background-color: rgba(26, 94, 255, 1);
}

.plugins-tabs {
    overflow: hidden;
}

.plugins-a-tabs >>> .ant-tabs-content {
    height: calc(100% - 60px);
}

.item-title {
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
}

.detail-btn {
    display: flex;
    gap: 4px 0;
    color: rgba(26, 94, 255, 1);
    cursor: pointer;
}

.detail-btn > .iconfont {
    display: inline-block;
    transform: rotate(90deg);
}


.plugins-open {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 16px 0;
}

.plugins-open-header {
    line-height: 44px;
}

.open-header-title {
    display: flex;
    gap: 0 10px;
    align-items: center;
}

.open-header-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.open-header-title {
    border-radius: 8px;
    padding: 0 16px;
    background-color: white;
}

.plugins-open-content {
    border-radius: 8px;
    flex: 1;
    display: flex;
    overflow: hidden;
    background-color: white;
}

.plugins-open-content-left {
    width: 240px;
    overflow: auto;
    padding: 16px;
    border-right: 1px solid rgba(228, 230, 237, 1);
}

.plugins-open-center {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.plugins-li-item {
    display: flex;
    align-items: center;
    gap: 0 6px;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 4px;
}

.plugins-li-item-title {
    white-space: nowrap;
    display: inline-block;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
}

.plugins-li-item:hover,
.plugins-li-item.active {
    background: rgba(26, 94, 255, 0.08);
    color: rgba(26, 94, 255, 100);
}
</style>